<!--
 * @Description: 我的订单
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-12-18 14:39:32
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-23 10:19:14
-->
<template>
    <bar title="我的订单" titleSize="max" :icon="true">
        <el-tabs
            class="order-tabs"
            v-model="tabstatus"
            @tab-click="handleClick"
        >
            <el-tab-pane
                :label="item.label"
                :name="item.name"
                v-for="item in tabs"
                :key="item.name"
            ></el-tab-pane>
        </el-tabs>
        <div class="orderList" v-if="list.length !== 0">
            <div class="item" v-for="item in list" :key="item.id">
                <div class="top">
                    <div class="left">
                        <span>订单编号：{{ item.orderId }}</span>
                        <span>时间：{{ dateFormat(item.createTime) }}</span>
                    </div>
                    <div class="right">{{ orderStatu(item.status) }}</div>
                </div>
                <div class="body">
                    <div class="s1">
                        <div class="img-box">
                            <img
                                :src="IMG_URL + item.cover"
                                :alt="item.title"
                            />
                        </div>
                        <div class="text">
                            <div class="name">{{ item.title }}</div>
                            <div class="info">
                                <span v-if="item.classTime"
                                    >上课时间：{{ item.classTime }}</span
                                >
                                <br />
                                <span v-if="item.classAddressDetail"
                                    >上课地点：{{
                                        item.classAddressDetail
                                    }}</span
                                >
                            </div>
                        </div>
                        <div class="Price">￥{{ item.totalFee }}</div>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span class="s">实付款：</span>
                            <span class="n">￥{{ item.totalFee }}</span>
                        </div>
                        <div class="right">
                            <span
                                class="btn plain_no"
                                v-if="item.status === 1"
                                @click="_delete(item.orderId)"
                                >删除订单</span
                            >
                            <span
                                class="btn"
                                v-if="item.status === 1"
                                @click="goPay(item.orderId)"
                                >去支付</span
                            >
                        </div>
                    </div>
                </div>
            </div>
            <el-pagination
                class="pagination"
                background
                layout="prev, pager, next"
                :total="total"
                :pager-count="5"
                :page-size.sync="pageSize"
                @current-change="pageChange"
            >
            </el-pagination>
        </div>
        <no-data v-else text="暂无订单哦~"></no-data>
    </bar>
</template>
<script>
import { getOrderList, deleteOrder } from "~/api";
import noData from "~/components/noData.vue";
export default {
    components: { noData },
    data() {
        return {
            // tabs订单状态
            tabstatus: "0",
            // 订单类型 空代表全部
            type: "",
            page: 1,
            pageSize: 10,
            total: 0,
            tabs: [
                {
                    label: "全部",
                    name: "0",
                },
                {
                    label: "待支付",
                    name: "1",
                },
                {
                    label: "已完成",
                    name: "2",
                },
            ],
            list: [],
        };
    },
    beforeMount() {
        this._getOrderList();
    },
    methods: {
        handleClick(event) {
            this._getOrderList();
        },
        // 获取订单列表
        _getOrderList() {
            getOrderList(
                this.tabstatus,
                this.type,
                this.page,
                this.pageSize
            ).then((res) => {
                if (res.data.code === 0) {
                    this.total = res.data.data.total;
                    this.list = res.data.data.list;
                }
            });
        },
        // 订单状态
        orderStatu(val) {
            switch (val) {
                case 1:
                    return "待支付";
                    break;
                case 2:
                    return "已完成";
                    break;
                default:
                    break;
            }
        },
        // 删除订单
        _delete(orderId) {
            this.$confirm("此操作将删除该订单, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                deleteOrder(orderId).then((res) => {
                    if (res.data.code === 0) {
                        this._getOrderList();
                        this.$message({
                            message: "删除成功",
                            type: "success",
                        });
                        
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            });
        },
        // 去支付
        goPay(orderId) {
            this.$router.push("/payment/" + orderId);
        },
        // 页数改变
        pageChange(page) {
            this.page = page;
            this._getOrderList();
        },
    },
};
</script>
<style lang="scss" scoped>
.orderList {
    .item {
        background: #ffffff;
        box-shadow: 0px 3px 6px rgba(153, 153, 153, 0.1);
        & + .item {
            margin-top: 20px;
        }
        .top {
            background: #f6f7f8;
            height: 50px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
                color: #888888;
                font-size: 14px;
                span {
                    & + span {
                        margin-left: 10px;
                    }
                }
            }
            .right {
                font-size: 14px;
                color: #f93e3e;
            }
        }
        .body {
            padding: 0 20px;
            .s1 {
                display: flex;
                justify-content: space-between;
                padding: 24px 0;
                .img-box {
                    flex: 0 0 120px;
                    height: 75px;
                    overflow: hidden;
                }
                .Price {
                    font-size: 24px;
                    color: #333;
                }
                .text {
                    flex: 1;
                    padding: 0 14px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .name {
                        color: #333333;
                        font-size: 18px;
                    }
                    .info {
                        color: #888888;
                        font-size: 14px;
                        line-height: 1.5;
                    }
                }
            }
            .bottom {
                border-top: 1px solid #eeeeee;
                height: 80px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .left {
                    .s {
                        color: #333333;
                        font-size: 20px;
                    }
                    .n {
                        font-size: 30px;
                        color: #f93e3e;
                    }
                }
                .right {
                    display: flex;
                    .btn {
                        min-width: 100px;
                        height: 35px;
                        font-size: 16px;
                        & + .btn {
                            margin-left: 14px;
                        }
                    }
                }
            }
        }
    }
    .pagination {
        text-align: center;
        padding: 20px 0;
    }
}
</style>